import Taro, { Component } from '@tarojs/taro';
import { View, Text, Label } from '@doctorwork/components';
import { connect } from '@tarojs/redux';
import { router } from '@doctorwork/saga';
import './index.styl';

@connect(({ festival, $app }) => ({
    ...festival,
    systeminfo: $app.systeminfo,
    platform: process.env.TARO_ENV,
    statusBarHeight: $app.systeminfo.statusBarHeight
}))
export default class Navigate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showBack: false,
            showHome: false,
            navH: '0',
            env: process.env.TARO_ENV,
            top: props.platform == 'weapp' ? props.statusBarHeight + 'px' : 0
        };
    }

    componentWillReceiveProps(nextProps) {
        if (window && window.document) {
            window.document.title = nextProps.title;
        }
        // 更新 title
    }
    componentDidShow() {
        if (window && window.document) {
            window.document.title = this.props.title;
        }
    }

    containerRef = node => (this.container = node);

    componentDidMount() {
        let pages = Taro.getCurrentPages();
        let showBack = Boolean(pages.length > 1);
        let current = pages[pages.length - 1];
        const {showHomeBtn} = this.props;

        let showHome = Boolean(getCurrentPages().length>1) || showHomeBtn ;

        const { systeminfo } = this.props;
        // 计算内容高度设置占位高度

        if (this.props.platform == 'weapp') {
            this.container
                .boundingClientRect(res => {
                    //导航高度
                    this.setState({
                        showBack,
                        showHome,
                        navH: res.height + 'px'
                    });
                    this.props.onCallback &&
                        this.props.onCallback(systeminfo.statusBarHeight + 46);

                    //@TODO dispatch action $app 保存navigate 高度??
                })
                .exec();
            return;
        }

        // h5 计算方式
        // @REVIEW 需要优化DOM获取方式
        const height = this.container._rendered.dom.clientHeight;
        this.setState({
            navH: height
        });
    }
    /**
     * 返回上一页
     */
    goBack() {
        this.props.dispatch(router.back());
    }
    /**
     *
     */
    backHome() {
        wx.switchTab({
            url: '/pages/index/index' //注意switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面
        });
    }
    render() {
        const { navH, showBack, showHome, env } = this.state;
        const {
            title = '',
            color = 'black',
            backgroundColor = 'white',
            backTextColor = 'black'
        } = this.props;

        // const border = `1rpx solid ${color}`;

        return (
            <View className='navigate-contaner' style={{ height: navH}}>
                <View
                    className='fixed-container'
                    ref={this.containerRef}
                    style={{ paddingTop: this.state.top ,backgroundColor}}
                >
                    {env === 'weapp' ? (
                        <View className='navigate-content' style={{height: '44px'}}>
                            {showBack || showHome ? (
                                <Label
                                    className='navigate-back'
                                    style={{
                                        top: '5px',
                                        color: backTextColor,
                                        border:
                                            showBack && showHome
                                                ? '1rpx solid #EAEAEA'
                                                : '',
                                        width: '85px',
                                        height: '30px',
                                        borderRadius: '30px'
                                    }}
                                >
                                    {showBack ? (
                                        <Text
                                            className='navigate-back-icon iconfont'
                                            onClick={this.goBack.bind(this)}
                                            style={{ fontSize: '20px' , lineHeight : '30px' }}
                                            data-name='返回'
                                        >
                                            &#xe602;
                                        </Text>
                                    ) : (
                                        ''
                                    )}
                                    {showBack && showHome ? (
                                        <View
                                            className='division'
                                            style={{ height: '18px' }}
                                        />
                                    ) : (
                                        ''
                                    )}
                                    {showHome ? (
                                        <Text
                                            className='navigate-back-icon iconfont'
                                            onClick={this.backHome.bind(this)}
                                            style={{ fontSize: '20px', lineHeight : '30px' }}
                                            data-name='HOME'
                                        >
                                            &#xe601;
                                        </Text>
                                    ) : (
                                        ''
                                    )}
                                </Label>
                            ) : (
                                ''
                            )}

                            <Text className='navigate-title' style={{ color }}>
                                {title}{' '}
                            </Text>
                        </View>
                    ) : null}

                    <View>{this.props.children}</View>
                </View>
            </View>
        );
    }
}
